<template>
    <div>
    <component-child v-bind:data-list="dataList" v-on:message="recieveMessage" @click="click"> </component-child> 
    <input v-model="dataInput" v-on:keyup.13="addDataItem()" ></input>
    </div>
</template>
<script>
import ComponentChild from './Child.vue'

export default {
  data () {
    return {
      dataInput: '',
      dataList: [ 'hello world!', 'welcome to use vue.js' ]
    }
  },
  components: {
    ComponentChild
  },
  methods: {
    addDataItem () {
      let self = this
      if (!(self.dataInput && self.dataInput.length > 0)) {
        return
      }
      self.dataList.push(self.dataInput)
      self.dataInput = ''
    },
    recieveMessage (text) {
      console.log('监听到子组件变化' + text)
    },
    click () {
      this.$refs.child.$emit('childMethod')
      this.$refs.child.callMethod()
    }
  }
}
</script>
